<template>
    <div>
        <div style="text-align: center;padding: 10% 0;">
            <p style="color: #fff;font-size: 24px;">绑定手机号</p>
        </div>
        <form class="container-fluid" style="height: 100%;">
            <div class="form-group">
                <label style="color: #fff;">手机号</label>
                <input v-model="mobile_number" type="text" class="form-control" placeholder="">
            </div>
            <div class="form-group">
                <label style="color: #fff;">验证码</label>
                <div class="input-group">
                    <input v-model="sms_code" type="text" class="form-control" placeholder="">
                    <div class="input-group-btn">
                        <div @click="sendSmsCode" class="btn btn-primary">发送验证码</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label style="color: #fff;">请输入密码</label>
                <div class="input-group">
                    <input v-model="password" type="password" class="form-control" placeholder="">
                    <div class="input-group-btn">
                        <div class="btn btn-primary" @click="postBind"><img width="20"
                                                                            src="../../assets/img/right-white.png">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</template>
<script>
    import swal from "sweetalert";

    export default {
        data() {
            return {
                mobile_number: '',
                sms_code: '',
                password: '',
            }
        },
        created() {
        },
        mounted() {
            // window.addEventListener('touchmove', func, { passive: false })
            document.querySelector('body').setAttribute('style', 'background-color:#4565b2;');
        },
        beforeDestroy() {
            document.querySelector('body').setAttribute('style', 'background-color:rgb(249,249,249);');
        },
        methods: {
            postBind() {
                if (this.mobile_number == '' || this.sms_code == '' || this.password == '') {
                    return;
                }
                this.api.postBind(this.mobile_number, this.sms_code, this.password).then(res => {
                    if (res.meta.code == '000') {
                        swal(res.meta.msg).then((value) => {
                            window.location.replace('/');
                        });
                    } else {
                        swal(res.meta.msg);
                    }
                });
            },
            sendSmsCode() {
                if (!/^[1][3,4,5,6,7,8][0-9]{9}$/.test(this.mobile_number)) {
                    swal("手机号码格式不正确");
                    return;
                }
                this.api.sendSmsCode(this.mobile_number).then(res => {
                    swal(res.meta.msg);
                });
            }
        },
    }
</script>
<style>


</style>
